﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>购物结算页面</title>
    <th:block th:insert="~{front/include::head}"></th:block>
</head>

<body>
<header th:replace="~{front/include::header}"></header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span></span> 购物
                <span></span> 结算
            </div>
        </div>
    </div>
    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="toggle_info">
                        <span><i class="fi-rs-label mr-10"></i><span class="text-muted">有优惠券?</span>
                            <a href="#coupon" data-bs-toggle="collapse" class="collapsed" aria-expanded="false">
                                点击此处输入优惠券编码
                            </a>
                        </span>
                    </div>
                    <div class="panel-collapse collapse coupon_form " id="coupon">
                        <div class="panel-body">
                            <p class="mb-30 font-sm">如果您有优惠券，请在下方输入使用</p>
                            <form method="post">
                                <div class="form-group">
                                    <input type="text" class="coupon_code" placeholder="输入优惠码...">
                                </div>
                                <div class="form-group">
                                    <button class="btn  btn-md" name="use-coupon">使用优惠券</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="divider mt-50 mb-50"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-25">
                        <h4>收货信息</h4>
                    </div>
                    <form id="receiver-form">
                        <div class="form-group">
                            <input list="name" placeholder="请输入或选择姓名" required/>
                            <datalist id="name" >
                                <option th:each="ma:${mas}" th:value="${ma.name}" th:text="${ma.name}">
                            </datalist>
                        </div>

                        <div class="form-group">
                            <select id="address" required>
                                <option disabled value="">请选择收货地址(无地址请移步账号设置)</option>
                                <option th:each="ma:${mas}" th:value="${ma.id}"
                                        th:text="${ma.streetAddress.fullName+ma.detail}"></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <input list="phone" placeholder="请输入或选择电话" required/>
                            <datalist id="phone">
                                <option th:each="ma:${mas}" th:value="${ma.phone}" th:text="${ma.phone}">
                            </datalist>
                        </div>

                        <div class="mb-20">
                            <h5>订单备注</h5>
                        </div>
                        <div class="form-group mb-30">
                            <textarea id="note" rows="5" placeholder="     输入备注..."></textarea>
                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <div class="order_review">
                        <div class="mb-20">
                            <h4>你的订单</h4>
                        </div>
                        <div class="table-responsive order_table text-center">
                            <table id="order_item_table" class="table">
                                <thead>
                                <tr>
                                    <th>商品图</th>
                                    <th>商品</th>
                                    <th>总价</th>
                                </tr>
                                </thead>
                                <tbody>
<!--                                订单明细表,循环所有订单项-->
                                <tr th:each="oi:${order.orderItems}">
                                    <td class="image product-thumbnail">
                                        <img th:src="@{/assets/{url}(url=${oi.goodsPic})}" alt="#">
                                    </td>
                                    <td>
                                        <h5>
                                            <a th:text="${oi.goodsName}"
                                               th:href="@{/vm/front/goods/detail(goodsId=${oi.goodsId})}">Summer Blue</a>
                                        </h5>
                                        <span th:text="'x '+${oi.quantity}" class="product-qty">x 2</span>
                                    </td>
                                    <td class="item_total_price" th:text="'$'+${oi.dealPrice*oi.quantity}">$180.00</td>
                                </tr>
                                <tr>
                                    <th>商品总价</th>
                                    <td class="product-subtotal" data-title="order_sub_price" colspan="2">$280.00</td>
                                </tr>
                                <tr>
                                    <th>运费</th>
                                    <td colspan="2"><em>免运费</em></td>
                                </tr>
                                <tr>
                                    <th>总价</th>
                                    <td colspan="2" class="product-subtotal">
                                        <span class="font-xl text-brand fw-900" data-title="order_price">$280.00</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="bt-1 border-color-1 mt-30 mb-30"></div>
                        <div class="payment_method">
                            <div class="mb-25">
                                <h5>支付方式</h5>
                            </div>
                            <div class="payment_option">
                                <div class="custome-radio">
                                    <input class="form-check-input" disabled type="radio" name="payment_option"
                                           id="payRadios1">
                                    <label class="form-check-label" for="payRadios1" data-bs-toggle="collapse"
                                           data-target="#bankCard" aria-controls="bankCard">银行卡支付</label>
                                </div>
                                <div class="custome-radio">
                                    <input class="form-check-input" disabled type="radio" name="payment_option"
                                           id="payRadios2">
                                    <label class="form-check-label" for="payRadios2" data-bs-toggle="collapse"
                                           data-target="#wechatPay" aria-controls="weichatPay">微信支付</label>
                                </div>
                                <div class="custome-radio">
                                    <input class="form-check-input"  type="radio" name="payment_option"
                                           id="payRadios3">
                                    <label class="form-check-label" for="payRadios3" data-bs-toggle="collapse"
                                           data-target="#alipay" aria-controls="alipay">支付宝支付</label>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="btn btn-fill-out btn-block mt-30">提交订单项</a>
                        <input type="hidden" id="order_id" th:value="${order.id}">
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<footer th:replace="~{front/include::footer}"></footer>
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>
<script th:src="@{/assets/front/js/shop/checkout.js}"></script>
</body>

</html>